<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" :hasFixedFlag="true" bgColor="usuallyBgQy" :needConBlock="true" :needRight="true">
			<block slot="content">首页</block>
			<!-- <block slot="right">111</block> -->
		</custom-nav-sq-xcx>
		<view class="bannerWrap">
			<image class="banner" :src="getQyStaticFilePath('banner.png')" mode="aspectFill"></image>
		</view>
		<view class="qyIndexCon">
			<view class="noticeWrap qySys">
				<view class="noticeBox flexAll">
					<image class="img" :src="getQyStaticFilePath('qyNotice.png')"></image>
				</view>
				<view class="swiper">
					<swiper duration="300" style="height:100%;"
						autoplay="true"
						interval="3000"
						vertical="true"
						circular="true"
					>
						<swiper-item class="swiperItem hasFlex">
							<view class="itemCon ellip">发大水了空间高房价管理会计的</view>
						</swiper-item>
						<swiper-item class="swiperItem hasFlex">
							<view class="itemCon ellip">发大水了空间高房价管理会计11的</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="iconfont icon-gengduo" @tap="goSqNewsList"></view>
			</view>
			<view class="qyIndexTab">
				<view class="indexTabItem"
					v-for="(item,index) in tabArr"
					:key="index"
				>
					<view class="tabItemTop flexAll">
						<template v-if="item.iconName != ''">
							<view class="iconfont" :class="item.iconName"></view>
						</template>
						<template v-else>
							<image class="samePar" :src="getQyStaticFilePath(item.src)"></image>
						</template>
					</view>
					<view class="tabItemTit">{{item.name}}</view>
				</view>
			</view>
			<view class="qyModTit spaceBet">
				<view>企业新闻</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
			<view class="qyNews">
				<qy-news-list></qy-news-list>
			</view>
			<view class="qyModTit spaceBet">
				<view>活动风采</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
			<view class="qyNews">
				<hd-style-list></hd-style-list>
			</view>
		</view>
	</view>
</template>

<script>
	import QyNewsList from '../subQyIndex/qyNews/components/QyNewsList.vue'
	import HdStyleList from '../subQyIndex/qyHdStyle/components/HdStyleList.vue'
	export default {
		components:{
			QyNewsList,
			HdStyleList
		},
		data(){
			return{
				tabArr:[
					{name:'心理测评',iconName:'icon-qyIndexCp',src:''},
					{name:'问卷调查',iconName:'',src:'qyIndexWj.png'},
					{name:'心理问答',iconName:'icon-qyIndexWd',src:''},
					{name:'即时倾诉',iconName:'',src:'qyIndexQs.png'},
					{name:'心理咨询',iconName:'icon-qyIndexZx',src:''},
					{name:'团体服务',iconName:'',src:'qyIndexFw.png'},
					{name:'企业活动',iconName:'icon-qyIndexHd',src:''},
					{name:'生涯规划',iconName:'icon-qyIndexGh',src:''}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/scss/sqQyNotice.scss";
	.bannerWrap{
		background: $pss-qy-main;
		padding: 20rpx 30rpx 50rpx;
		.banner{
			width: 100%;
			height: 300rpx;
			border-radius: 16rpx;
		}
	}
	.qyIndexCon{
		border-radius: 20rpx 20rpx 0 0;
		background: #fff;
		padding: 30rpx;
		background: #fff;
		margin-top: -30rpx;
	}
	.qyIndexTab{
		display: flex;
		flex-wrap: wrap;
		.indexTabItem{
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			font-size: 26rpx;
			color: $qy-main2;
		}
		$comnSize:80rpx;
		.tabItemTop{
			width: $comnSize;
			height: $comnSize;
			margin-bottom: 10rpx;
			.iconfont{
				font-size: 56rpx;
				color: #EF4C2D;
				&.icon-qyIndexZx{
					color: #F0A63B;
				}
				&.icon-qyIndexGh{
					color: #8170F7;
				}
			}
		}
	}
	.qyModTit{
		height: 80rpx;
		align-items: center;
		font-size: 32rpx;
		color: $qy-main2;
		font-weight: 600;
		.iconfont{
			font-weight: normal;
			font-size: 24rpx;
			color: $qy-mainb;
		}
	}
	.qyNews{
		margin-top: 10rpx;
	}
</style>